<template>
  <path
    stroke="#000000"
    :style="{
      'stroke-width': 1,
      fill: '#ffffff',
    }"
    :d="d"
  />
</template>
<script setup lang="ts">
import { computed } from "vue";
import { Point } from "/@/components/types";

const props = defineProps<{
  points: Point[];
}>();

const arrowTailHeightRatio = 0.5;
const arrowSideOffsetRatio = 1 / 8;

/**
 *         2
 *         | *
 * 0-------1  *
 * |           *
 * |            3
 * |           *
 * 6-------5  *
 *         | *
 *         4
 */
const d = computed(() => {
  const points = props.points;
  const arrowHeight = points[4].y - points[0].y;
  const arrowWidth = points[2].x - points[0].x;
  const arrowTailHeight = arrowHeight * arrowTailHeightRatio;
  const p0 = { x: points[0].x, y: points[0].y + (arrowHeight - arrowTailHeight) / 2 };
  const p1 = { x: points[1].x + arrowWidth * arrowSideOffsetRatio, y: p0.y };
  const p2 = { x: p1.x, y: points[1].y };
  const p3 = { x: points[3].x, y: points[3].y };
  const p4 = { x: p1.x, y: points[5].y };
  const p5 = { x: p1.x, y: p0.y + arrowTailHeight };
  const p6 = { x: points[0].x, y: p5.y };
  const pathPoints: Point[] = [p0, p1, p2, p3, p4, p5, p6];
  const dArr: string[] = [];
  pathPoints.forEach((p) => {
    dArr.push(`${p.x} ${p.y}`);
  });
  const d = "M" + dArr.join("L") + "Z";
  return d;
});
</script>
